<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <style>
        /*表单外框*/
        .rg_layout{
            width: 700px;
            height: 400px;
            border: 8px solid #cef6f8;/*边框 8个像素 实线 设置一个颜色*/
            background: #ffffff;/*背景为白色*/
            /*让这个div水平居中*/
            margin: auto;
            margin-top: 100px;
            margin-bottom: 100px;
        }
        /*表单项*/
        .td_left{
            width: 200px;
            height:30px;
            text-align: right;
            padding-top: 30px;
        }
        .td_right{
            width: 300px;
            height:30px;
            padding-left: 10px;
            padding-top: 30px;
        }

        /*验证码图片*/
        .td_img{
            padding-left: 290px;
            padding-top: 5px;
        }

        /*登录按钮 居中*/
        .td_sub{
            padding-left: 300px;
            padding-top: 30px;
        }
        /*跳转注册界面超链接*/
        .td_a{
            padding-left: 260px;
            padding-top: 10px;
        }
        /*错误提示信息*/
        #hint{
            color: red;
            padding-left: 280px;
            padding-top: 20px;
        }
    </style>
    <script>
        //验证码点击事件
        function changeCheckCode(img) {
            img.src="checkCode?"+new Date().getTime();
        }

        //各个表单项的正则表达式
        //用户名 数字7--15位
        function checkUsername() {
            var reg = /^\w{7,15}$/;
            var username = $("#username").val();
            return reg.test(username);
        }
        //密码 7-15位数字和字母
        function checkPassword() {
            var password = $("#password").val();
            var reg = /^\w{7,15}$/;
            return reg.test(password);
        }
        //验证码
        function checkCheck(){
            var check = $("#check").val();
            var reg = /^\w{4,4}$/;
            return reg.test(check);
        }

        //入口函数
        $(function () {
            //表单
            $("#loginFrom").submit(function(){
                //1. 首先判断各个表单项是否满足正则表达式，如果满足就向后台发送ajax请求
                if (checkUsername() && checkPassword() && checkCheck()){
                    $.post("user/login",$("#loginFrom").serialize(),function (data) {
                        if (data.flag){
                            //登录成功
                            if (data.data.identity == 1){
                                //学生
                                location.href="student_html/stu_main_page.html";
                            }else if (data.data.identity == 2){
                                //宿管老师
                                location.href="teacher_html/tea_main_page.html";
                            }else{
                                //超级管理员
                                location.href="super_admain_html/admain_main_page.html";
                            }
                        }else{
                            //登录失败
                            $("#hint").html(data.errorMsg)
                        }
                    },"json");
                }
                return false;
            });


            //给各个表单项添加离焦事件
            //学号
            $("#username").blur(function () {
                if (checkUsername()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //密码
            $("#password").blur(function () {
                if (checkPassword()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //验证码
            $("#check").blur(function () {
                if (checkCheck()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
        });



    </script>

</head>
<body>
    <!-- 最上方欢迎信息 -->
    <div class="alert alert-info" role="alert" align="center">欢迎使用本宿舍管理系统</div>
    <!-- 中间表单的外框 -->
    <div class="rg_layout">
        <!-- 登录表单 -->
        <form action="#" method="post" id="loginFrom">
            <table>
                <tr>
                    <td class="td_left">
                        <label for="username">账号</label>
                    </td>
                    <td class="td_right">
                        <input type="text" class="form-control" id="username" name="username" placeholder="用户名"/>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="password">密码</label>
                    </td>
                    <td class="td_right">
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码"/>
                    </td>
                </tr>
                <tr>
                    <td class="td_left">
                        <label for="check">验证码</label>
                    </td>
                    <td class="td_right">
                        <input type="text" class="form-control" id="check" name="check" placeholder="验证码"/>
                    </td>
                </tr>
                <!-- 验证码 -->
                <tr>
                    <td colspan="2" class="td_img"><img src="checkCode" onclick="changeCheckCode(this)"/></td>
                </tr>
                <!-- 登录按钮 -->
                <tr>
                    <td colspan="2" class="td_sub" ><input class="btn btn-info" type="submit" id="btn_sub" value="登录"></td>
                </tr>
                <tr>
                    <td colspan="2" class="td_a" ><a href="register.html" title="即将跳往注册界面">还没有账号？请注册！</a></td>
                </tr>
            </table>
        </form>
        <!-- 登录失败错误提示信息 -->
        <div id="hint"></div>
    </div>

    <div class="alert alert-info" role="alert" style="margin-top:10px;">
        <span><b>温馨提示：</b></span><br/>
        <p>请勿频繁操作！</p>
    </div>
</body>
</html>